<!-- 动态消息组件 -->
<!-- 小旗子 2020/8/21日更新-->
<!-- 取消最外层循环，将循环挪至外层页面 -->
<!-- 8.24
		1.改变查看样式，添加查看跳转事件-->
		
<!-- 10.2 小瓜子
		重构结构及样式 -->
<template>
	<view class="message" @longpress='deleteData'>
		<view class="avatar">
			<!-- 头像 -->
			<image :src="avatar" mode="aspectFill" @tap.stop="toInformation" />
		</view>
		<view class="detail_box" @tap="toDetail(datas.post_type)">
			<view class="name_text" @tap.stop="toInformation">
				<!-- 回复人或评论人名字 -->
				<text class="name" @tap.stop="toInformation">{{nickName + ' '}}</text>
				<!-- 行为 -->
				<text class="reply">{{datas.source_id === 'null' ? "关注了我" : (datas.action + '了我的' + datas.source_type)}}</text>
			</view>
			<!-- 被回复的消息内容 -->
			<text class="source_content" v-if="datas.source_id !== 'null'">
				{{datas.source_content}}
			</text>

			<view class="bottom_item">
				<text class="post_time">{{postTime()}}</text>
				<view class="view_more" v-if="datas.source_id !== 'null'">
					<text>查看</text>
					<text class="inxupt inxupttubiao30"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { _ajax } from '../../in-xupt-functions.js'
	import { opdb } from '../../in-xupt-functions.js'
	
	export default{

		props: {
			datas: {
				type: Object,
				default: {}
			},
			userId: {
				type: String,
				default: ''
			}
		},
		data() {
			return{
				avatar: '',
				nickName: ''
			}
		},
		methods: {
			deleteData: function() {
				this.$emit('deleteData',this.$props.datas.id)
			},
			toInformation: function() {
				console.log("个人详情页");
				// console.log('../OthersInformation/OthersInformation?userId=' + this.$props.userId)
				uni.navigateTo({
					url:'../OthersInformation/OthersInformation?userId=' + this.$props.userId
				})
			},
			getAvatarAndNickname: function(id) {
				_ajax({
					url: '/user/' + id * 1 + '/avatarAndNickname'
				})
				.then(res => {
					if(res.data.status == 0) {
						this.avatar = res.data.data.avatar;
						this.nickName = res.data.data.nickname;
					}
					console.log(res)
				})
			},
			toDetail: function(sourceType) {
				console.log(sourceType);
				if(sourceType == 'null') {
					uni.navigateTo({
						url: '../OthersInformation/OthersInformation?userId=' + this.$props.datas.sender_id
					})
				}else {
					let urlList = ['../Postings/Postings?postId=','../Academic/Academic?postId=']
					uni.navigateTo({
						url: (sourceType == 1 ? urlList[0] : urlList[1]) + this.$props.datas.source_id
					})
				}
			},
			previewImg: function(logourl){
				var that=this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					current:0,
					urls:imgsArray
				})
			},
			getTime: function(time) {
				console.log(this.$props.datas.source_id)
				return [time.getFullYear(), time.getMonth() + 1, time.getDate(), time.getHours(), time.getMinutes()]
			},
			postTime: function() {
				if(!this.$props.datas.send_time) {
					return
				}else {
					// 得到当前时间
					let nowTime = new Date().getTime()
					// 得到评论发布时间
					let previousTime = new Date(this.$props.datas.send_time).getTime()
					// 生成年月日时分秒数组，方便循环计算
					let nowTimeList = this.getTime(new Date());
					let previousTimeList = this.getTime(new Date(this.$props.datas.send_time));
					
					// 小于24小时，显示**小时前/**分钟前
					// 超过24小时且不超过一年，显示**月**日
					// 超过一年，显示**年**月**日
					var deltaTime = nowTime - previousTime;
					
					// 小于一分钟
					if (deltaTime / 1000 < 60) {
						return '1分钟内'
					} else if (deltaTime / 1000 / 60 < 60) {
						// 一小时内显示××分钟前
						return (deltaTime / 1000 / 60).toFixed() + '分钟前'
					} else if (deltaTime / 1000 / 60 /60 < 24) {
						// 一天内显示××小时前
						return (deltaTime / 1000 / 60 / 60).toFixed() + '小时前'
					} else if (deltaTime / 1000 / 60 /60 / 24 < 7) {
						
						return (deltaTime / 1000 / 60 / 60 / 24).toFixed() + '天前'
					} else if (nowTimeList[0] == previousTimeList[0]) {
						// 大于一天且是本年发的 则显示××月××日
						return previousTimeList[1] + '-' + previousTimeList[2]
					} else {
						// 大于一天且是本年发的 则显示××××年××月××日
						return previousTimeList[0] + '-' + previousTimeList[1] + '-' + previousTimeList[2]
					}
				}
			}
		},
		created:function(){
			this.getAvatarAndNickname(this.userId)
		}
	}
</script>

<style lang="less">
	text {
		font-size: 12px;
	}
	.message{
		display: flex;
		width: 100%;
		background-color: #FFFFFF !important;
		padding: 10px 16rpx;
		box-sizing: border-box;
		margin-bottom: 10px;
		.inxupttubiao30::before {
			display: inline-block;
			transform: rotate(-90deg);
			color: @g-gray;
		}
		.avatar {
			height: 100%;
			margin-right: 20rpx;
			image {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
		}
		.reply,
		.source_content,
		.bottom_item {
			color: @g-gray;
		}
		.detail_box {
			width: calc(100% - 40px - 20rpx);
			height: 100%;
			display: flex;
			flex-direction: column;
			.name_text {
				line-height: 14px;
				margin-bottom: 5px;
				text {
					font-size: 14px;
				}
			}
			.reply_content {
				margin-top: 10px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.source_content {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.bottom_item {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				.view_more {
					line-height: 12px;
				}
			}
		}
	}
</style>

